<template>
	<view>
		<v-tabs fixed v-model="activeTab" :scroll="false" :tabs="['未缴费', '已缴费',]" @change="changeTab" 
		:lineHeight="0"></v-tabs>
		<view class="cards">
			<navigator :url="`../bill_detail/bill_detail?id=${item.id}`" v-for="(item, idx) in curList.list" :key="idx">
				<view class="card">
					<view class="horizontal">
						<view class="fixed" style="width: 5em;">房号：</view>
						<view class="scale">{{`${item.courtName}${item.buildingName}${item.unit}单元${item.floor}层${item.no}`}}</view>
					</view>
					<view class="horizontal">
						<view class="fixed" style="width: 5em;">本次水量：</view>
						<view class="scale">{{item.waterNum}}L</view>
					</view>
					<view class="horizontal">
						<view class="fixed" style="width: 5em;">应缴金额：</view>
						<view class="scale">￥{{item.price}}元</view>
					</view>
					<view class="horizontal">
						<view class="fixed" style="width: 5em;">抄表日期：</view>
						<view class="scale">{{item.readTime | smartTime('YY/mm/dd')}}</view>
					</view>
					<view class="horizontal" v-if="item.status==1">
						<view class="fixed" style="width: 5em;">支付时间：</view>
						<view class="scale">{{item.payTime | smartTime('YY/mm/dd HH:MM:SS')}}</view>
					</view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	import listLoader from'@/mixins/listLoader.js'
	
	const app = getApp()
	
	export default {
		name:'bills',
		mixins:[listLoader,],
		data() {
			return {
				activeTab:0,
				bills:{
					payed:{
						pageNum: 0,
						pageSize: 10,
						totalPage: 0,
						total: 0,
						list:[
							
						]
					},			// 已交费
					unpayed:{
						pageNum: 0,
						pageSize: 10,
						totalPage: 0,
						total: 0,
						list:[
							
						]
					},			// 未缴费
				},
			}
		},
		onLoad(opts) {
			if(opts.status){
				this.activeTab = Number.parseInt(opts.status)
			}
		},
		onShow(){
			this.refreshRecord(this.curList, app.globalData.domain + 'order/list', {status: this.activeTab})
		},
		methods: {
			changeTab(e){
				this.activeTab=e
				this.refreshRecord(this.curList, app.globalData.domain + 'order/list', {status: e})
			}
		},
		computed:{
			curList(){
				switch(this.activeTab){
					case 0:
					return this.bills.unpayed
					case 1:
					return this.bills.payed
				}
			}
		}
	}
</script>

<style scoped>
	
</style>
